<template>
	<view class="order-card" @click="handleClick">
		<view class="order-header">
			<text class="order-title">{{ order.title }}</text>
			<text class="order-status" :class="getStatusClass(order.status)">
				{{ getStatusText(order.status) }}
			</text>
		</view>
		
		<view class="order-content">
			<text class="order-desc">{{ order.description }}</text>
		</view>
		
		<view class="order-info">
			<view class="info-row">
				<text class="label">预算：</text>
				<text class="value budget">￥{{ order.budget }}</text>
			</view>
			<view class="info-row">
				<text class="label">分类：</text>
				<text class="value">{{ order.categoryName }}</text>
			</view>
			<view class="info-row">
				<text class="label">发布者：</text>
				<text class="value">{{ order.userName }}</text>
			</view>
			<view class="info-row" v-if="order.techName">
				<text class="label">技术员：</text>
				<text class="value">{{ order.techName }}</text>
			</view>
			<view class="info-row">
				<text class="label">创建时间：</text>
				<text class="value">{{ formatTime(order.createTime) }}</text>
			</view>
			<view class="info-row" v-if="order.deadline">
				<text class="label">截止时间：</text>
				<text class="value">{{ formatTime(order.deadline) }}</text>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="order-actions" v-if="showActions">
			<slot name="actions" :order="order">
				<!-- 默认操作按钮 -->
				<button 
					class="action-btn primary" 
					v-if="canAccept"
					@click.stop="$emit('accept', order.id)"
				>
					接单
				</button>
				
				<button 
					class="action-btn success" 
					v-if="canComplete"
					@click.stop="$emit('complete', order.id)"
				>
					标记完成
				</button>
				
				<button 
					class="action-btn warning" 
					v-if="canProgress"
					@click.stop="$emit('progress', order.id)"
				>
					更新进度
				</button>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			order: {
				type: Object,
				required: true
			},
			showActions: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			userRole() {
				return this.$store && this.$store.state && this.$store.state.userInfo ? this.$store.state.userInfo.roleType : null
			},
			
			currentUserId() {
				return this.$store && this.$store.state && this.$store.state.userInfo ? this.$store.state.userInfo.id : null
			},
			
			canAccept() {
				return this.userRole === 'tech' && 
					   this.order.status === 1 && 
					   !this.order.techId
			},
			
			canComplete() {
				return this.userRole === 'tech' && 
					   this.order.status === 2 && 
					   this.order.techId === this.currentUserId
			},
			
			canProgress() {
				return this.userRole === 'tech' && 
					   this.order.status === 2 && 
					   this.order.techId === this.currentUserId
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', this.order)
			},
			
			getStatusClass(status) {
				const statusMap = {
					1: 'status-pending',
					2: 'status-processing',
					3: 'status-reviewing',
					4: 'status-completed',
					5: 'status-cancelled'
				}
				return statusMap[status] || ''
			},
			
			getStatusText(status) {
				const statusMap = {
					1: '待接单',
					2: '进行中',
					3: '待验收',
					4: '已完成',
					5: '已取消'
				}
				return statusMap[status] || '未知'
			},
			
			formatTime(time) {
				if (!time) return ''
				const date = new Date(time)
				const now = new Date()
				const diff = now - date
				
				if (diff < 60000) return '刚刚'
				if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
				if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
				return Math.floor(diff / 86400000) + '天前'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-card {
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.2s ease;
		
		&:active {
			transform: scale(0.98);
		}
		
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20rpx;
			
			.order-title {
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-right: 20rpx;
				line-height: 1.4;
			}
			
			.order-status {
				font-size: 24rpx;
				padding: 6rpx 16rpx;
				border-radius: 15rpx;
				white-space: nowrap;
			}
		}
		
		.order-content {
			margin-bottom: 20rpx;
			
			.order-desc {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
		
		.order-info {
			margin-bottom: 20rpx;
			
			.info-row {
				display: flex;
				margin-bottom: 10rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.label {
					font-size: 24rpx;
					color: #666;
					width: 120rpx;
				}
				
				.value {
					flex: 1;
					font-size: 24rpx;
					color: #333;
					
					&.budget {
						font-weight: bold;
						color: #FF6B6B;
					}
				}
			}
		}
		
		.order-actions {
			display: flex;
			gap: 20rpx;
			
			.action-btn {
				flex: 1;
				height: 60rpx;
				border: none;
				border-radius: 30rpx;
				font-size: 24rpx;
				
				&.primary {
					background: #007bff;
					color: #fff;
				}
				
				&.success {
					background: #28a745;
					color: #fff;
				}
				
				&.warning {
					background: #ffc107;
					color: #333;
				}
			}
		}
	}
	
	// 状态样式
	.status-pending {
		background: rgba(255, 149, 0, 0.1);
		color: #ff9500;
	}
	
	.status-processing {
		background: rgba(0, 122, 255, 0.1);
		color: #007AFF;
	}
	
	.status-reviewing {
		background: rgba(88, 86, 214, 0.1);
		color: #5856d6;
	}
	
	.status-completed {
		background: rgba(52, 199, 89, 0.1);
		color: #34c759;
	}
	
	.status-cancelled {
		background: rgba(255, 59, 48, 0.1);
		color: #ff3b30;
	}
</style>